<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>儿童兴趣班-套餐中心</title>
    <link rel="stylesheet" href="../layui/css/layui.css"><!-- 引入layui -->
    <link rel="stylesheet" href="../css/front/combo.css"><!-- 内容样式 -->
    <link rel="stylesheet" href="../css/front/background.css"><!-- 背景样式 -->
    <link rel="stylesheet" href="../css/front/ShoppingCart.css"><!-- 购物车样式 -->
</head>

<body>
<!-- 背景动画 -->
<ul class="square">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="circle">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
    <div class="main-content">
        <!-- ====================== 1. 导航栏模块 ====================== -->
        <ul class="layui-nav layui-fixed">
            <li class="layui-nav-item"><a href="index.html">首页</a></li>
            <li class="layui-nav-item"><a href="combo.html">套餐中心</a></li>
            <li class="layui-nav-item"><a href="AboutUs.html">关于我们</a></li>

            <!-- 头像 -->
            <li class="layui-nav-item" style="float: right;">
                <a href="">
                    <img src="../img/front/headshot.jpg" class="layui-nav-img">
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="PersonalInformation.html">个人信息</a></dd>
                    <dd><a href="Login.html">登录</a></dd>
                </dl>
            </li>
        </ul>
        <!-- ====================== 内容模块 ====================== -->
            <div class="layui-card comboShow">
                <div class="comboShow-left" id="tabHeader">
                        <button class="btn layui-btn-primary layui-this">套餐1</button>
                        <button class="btn layui-btn-primary">套餐2</button>
                        <button class="btn layui-btn-primary">套餐3</button>
                </div>
                <div class="comboShow-body comboShow-right" id="tabBody">

                    <div class="layui-show comboShow-body-div">
                        <div class="comboShow-div">
                            <div class="body-div-left">
                                <div class="body-div-title">标题1</div>
                                <hr/>
                                <div class="body-div-content">
                                    <div class="layui-card-body">
                                        <img src="../img/front/Slideshow0.jpg" alt="音乐基础" class="course-img">
                                        <p>适合年龄：6-10岁</p>
                                        <p>课程内容：音乐理论，乐器入门</p>
                                        <p>价格：￥600</p>
                                        <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                            <div class="body-div-right">
                                <span>评论区</span>
                                <hr/>
                                <div class="comboShow-comments">
                                    <div>
                                        <p>鬼鬼酱</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>鬼鬼酱</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>鬼鬼酱</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>鬼鬼酱</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>鬼鬼酱</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comboShow-body-div">
                        <div class="comboShow-div">
                            <div class="body-div-left">
                                <div class="body-div-title">标题2</div>
                                <hr/>
                                <div class="body-div-content">
                                    <div class="layui-card-body">
                                        <img src="../img/front/Slideshow0.jpg" alt="音乐基础" class="course-img">
                                        <p>适合年龄：6-10岁</p>
                                        <p>课程内容：音乐理论，乐器入门</p>
                                        <p>价格：￥600</p>
                                        <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                            <div class="body-div-right">
                                <span>评论区</span>
                                <hr/>
                                <div class="comboShow-comments">
                                    <div>
                                        <p>文斌</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>文斌</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>文斌</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>文斌</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>文斌</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comboShow-body-div">
                        <div class="comboShow-div">
                            <div class="body-div-left">
                                <div class="body-div-title">标题3</div>
                                <hr/>
                                <div class="body-div-content">
                                    <div class="layui-card-body">
                                        <img src="../img/front/Slideshow0.jpg" alt="音乐基础" class="course-img">
                                        <p>适合年龄：6-10岁</p>
                                        <p>课程内容：音乐理论，乐器入门</p>
                                        <p>价格：￥600</p>
                                        <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                            <div class="body-div-right">
                                <span>评论区</span>
                                <hr/>
                                <div class="comboShow-comments">
                                    <div>
                                        <p>昂古</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>昂古</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>昂古</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>昂古</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                    <div>
                                        <p>昂古</p>
                                        <p>谁说这课程不好的，这课程可太好了！</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="combo1">
                <!-- 套餐中心标题 -->
                <div class="layui-container container">
                    <span class="layui-h1"> — 入门优惠套餐 — </span>
                </div>
                <!-- 套餐列表 -->
                <div class="layui-row layui-col-space30 combo-row">

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐A - 绘画入门
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="绘画入门" class="course-img">
                                <p>适合年龄：5-8岁</p>
                                <p>课程内容：基础绘画技巧，色彩搭配</p>
                                <p>价格：￥500</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐B - 音乐基础
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="音乐基础" class="course-img">
                                <p>适合年龄：6-10岁</p>
                                <p>课程内容：音乐理论，乐器入门</p>
                                <p>价格：￥600</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐C - 编程启航
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="编程启航" class="course-img">
                                <p>适合年龄：8-12岁</p>
                                <p>课程内容：基础编程逻辑，Scratch编程</p>
                                <p>价格：￥700</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐C - 编程启航
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="编程启航" class="course-img">
                                <p>适合年龄：8-12岁</p>
                                <p>课程内容：基础编程逻辑，Scratch编程</p>
                                <p>价格：￥700</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="combo2">
                <div class="layui-container container">
                    <span class="layui-h1"> — 热门课程套餐 — </span>
                </div>
                <!-- 套餐列表 -->
                <div class="layui-row layui-col-space30 combo-row">

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐A - 绘画入门
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="绘画入门" class="course-img">
                                <p>适合年龄：5-8岁</p>
                                <p>课程内容：基础绘画技巧，色彩搭配</p>
                                <p>价格：￥500</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐B - 音乐基础
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="音乐基础" class="course-img">
                                <p>适合年龄：6-10岁</p>
                                <p>课程内容：音乐理论，乐器入门</p>
                                <p>价格：￥600</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐C - 编程启航
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="编程启航" class="course-img">
                                <p>适合年龄：8-12岁</p>
                                <p>课程内容：基础编程逻辑，Scratch编程</p>
                                <p>价格：￥700</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                套餐C - 编程启航
                            </div>
                            <div class="layui-card-body">
                                <img src="../img/front/Slideshow0.jpg" alt="编程启航" class="course-img">
                                <p>适合年龄：8-12岁</p>
                                <p>课程内容：基础编程逻辑，Scratch编程</p>
                                <p>价格：￥700</p>
                                <button class="layui-btn layui-btn-normal buy-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
    </div>
    <!-- ====================== 购物车模块 ====================== -->
    <div id="ShoppingCart">
        <i class="layui-icon layui-icon-cart-simple icon"></i>
    </div>
    <!-- ====================== 页脚模块 ====================== -->
    <div class="footer layui-fluid">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <p>© 2024 徐文斌 版权所有</p>
                    <p>联系电话:173-6960-0067 | 地址:珠海市斗门区文斌街道</p>
                </div>
            </div>
        </div>
    </div>
    <!-- ====================== 7. 脚本引用 ====================== -->
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-3.7.1.js"></script>
    <script src="../js/front/ShoppingCart.js"></script>
    <script src="../js/front/combo.js"></script>
        <script></script>
</body>

</html>